<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Startup</title>
    <style>
      .test {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script
    crossorigin
    src="https://unpkg.com/react@18/umd/react.development.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
  ></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  <script type="text/babel">
    const message = 'Hello world How are you !';
    const styleObject = {
      color: 'blue'
    };
    const isLogin = false;
    function Login() {
      return <div>Already login !</div>;
    }
    function UnLogin() {
      return <div>Haven`t login !</div>;
    }
    // button组件
    function LikeButton() {
      return React.createElement(
        'button',
        { onClick: () => console.log('click') },
        'Click'
      );
    }
    // 创建一个页面组件
    function MyAPP() {
      let content = <Login />;
      content = isLogin ? <Login /> : <UnLogin />;
      return (
        <div>
          <h1 style={styleObject} className="test">
            {message}
          </h1>
          {isLogin ? <Login /> : <UnLogin />}
          {content}
          <LikeButton />
        </div>
      );
    }
    const rootNode = document.getElementById('root');
    const root = ReactDOM.createRoot(rootNode);
    root.render(React.createElement(MyAPP));
  </script>
</html>
